<template>
	<view class="content">
		<view class="middle">
			<home v-if="clickedIndex == 0"></home>
			<search v-if="clickedIndex == 1" ref="searchs"></search>
			<mine v-if="clickedIndex == 2" ref="mine"></mine>
		</view>
		<view class="tab-bar">
			<view class="tab-bar-item " @click="changeTab(0)">
				<view :class="[clickedIndex==0?'box':'box_no']">
					<image class="tab_img"
						:src="clickedIndex==0?'../static/images/tabbar/home_.png':'../static/images/tabbar/home.png' ">
					</image>
				</view>

			</view>
			<view class="tab-bar-item " @click="changeTab(1)">
				<view :class="[clickedIndex==1?'box':'box_no']">
					<image class="tab_img"
						:src="clickedIndex==1?'../static/images/tabbar/search_.png':'../static/images/tabbar/search.png' ">
					</image>
				</view>
			</view>
			<view class="tab-bar-item" @click="changeTab(2)">
				<view :class="[clickedIndex==2?'box':'box_no']">
					<image class="tab_img"
						:src="clickedIndex==2?'../static/images/tabbar/mine_.png':'../static/images/tabbar/mine.png' ">
					</image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import home from '@/pages/home/home.vue'
	import mine from '@/pages/mine/index.vue'
	import search from '@/pages/search/index.vue'
	import {getHomeRecmend} from '@/api/change/index.js'
 	export default {
		components: {
			home,
			mine,
			search
		},
		onLoad: function() {
			console.log('function')
			// this.getHomeRecmend1()
		},
		data() {
			return {
				clickedIndex: 0
			}
		},
		methods: {
			changeTab(e) {
				this.clickedIndex = e
				if(e==1){
					setTimeout(res=>{
						this.$refs.searchs.clickParent()
					},500)
				}else if(e==2){
					setTimeout(res=>{
						this.$refs.mine.getInfoM()
					},500)
				}
			},
			getHomeRecmend1(){
				getHomeRecmend({page:1,pageSize:10}).then(res=>{
					
				})
			},
		
		}
	}
</script>

<style scoped lang="scss">
	.tab-bar {

		border-radius: 25px 25px 0 0;

		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 80px;
		background: white;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部

		.tab-bar-item {
			flex: 1;
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.box {
				width: 50px;
				height: 50px;
				line-height: 20px;
				border-radius: 10px;
				background-color: rgba(79, 79, 79, 1);
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.box_no {
				width: 50px;
				height: 50px;
				line-height: 20px;
				border-radius: 10px;
				background-color: white;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.tab_img {
				width: 30px;
				height: 30px;
			}

			.tab_text {
				font-size: 20rpx;
				margin-top: 9rpx;
			}
		}
	}


	.tabbar {
		width: calc(100% - 8px);
		height: 70px;
		line-height: 20px;
		border-radius: 25px;
		background-color: rgba(255, 255, 255, 1);
		text-align: center;
		box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
		border: 3px solid rgba(79, 79, 79, 1);
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.middle {
		height: calc(100% - 100rpx);
		width: 100%;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>